import { FC, useEffect, useState } from "react"
import styles from "./index.less"
import { Modal, Input } from "antd"
import { Irecords } from "@/services/consultation"

interface IRemarkProps {
  remarkRecord?: Irecords,
  remarkShow: boolean | false
  changeRemark: (remarkShow: boolean, remark?: string | null | undefined, consultId?: number | null | undefined) => void
}
const consultationRemark: FC<IRemarkProps> = ({ remarkRecord, remarkShow, changeRemark }) => {
  const [remark, setRemark] = useState<string | null | undefined>("")


  useEffect(() => {
    (remarkRecord) && (setRemark(remarkRecord.remark))
  }, [remarkRecord])
  return (
    <div className={styles.consultationRemarkBox}>
      <Modal
        title="备注"
        getContainer={false}
        centered width={520}
        visible={remarkShow}
        onCancel={() => { changeRemark(false) }}
        onOk={() => { changeRemark(true, remark, remarkRecord ? remarkRecord.id : 0) }}>
        <Input.TextArea rows={8} value={remark ? remark : ""} onChange={(e) => { setRemark(e.target.value) }} />
      </Modal>

    </div>
  )

}
export default consultationRemark